<script setup>
import emitter from '../utils/emitter.js'
import { ref } from 'vue'

const isSidebarOpen = ref(true)
const toggleSidebar = () => {
  isSidebarOpen.value =!isSidebarOpen.value
  emitter.emit('toggle-sidebar')
}
</script>

<template>
  <nav class="fixed top-0 left-0 right-0 h-16 bg-white">
    <div class="px-8 h-full flex justify-between items-center">
      <!-- Navbar 左侧 -->
      <div class="flex items-center">
        <h1 class="text-2xl font-bold text-gray-800">Ablog</h1>
        <button
            @click="toggleSidebar"
            class="ml-6 p-3 rounded-full hover:bg-gray-200 transition-colors"
        >
          <svg t="1732184020779" class="fill-slate-700 h-6 w-6" viewBox="0 0 1109 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="28259"><path d="M0.000427 512a85.333333 85.333333 0 0 1 85.205333-85.333333h938.922667c47.061333 0 85.205333 38.186667 85.205333 85.333333a85.333333 85.333333 0 0 1-85.205333 85.333333H85.20576A85.077333 85.077333 0 0 1 0.000427 512zM0.000427 85.333333C0.000427 38.186667 38.10176 0 84.992427 0h470.016C601.94176 0 640.000427 37.888 640.000427 85.333333c0 47.146667-38.101333 85.333333-84.992 85.333334H84.992427C38.059093 170.666667 0.000427 132.778667 0.000427 85.333333z m469.333333 853.333334c0-47.146667 38.101333-85.333333 84.992-85.333334h470.016c46.933333 0 84.992 37.888 84.992 85.333334 0 47.146667-38.101333 85.333333-84.992 85.333333H554.32576c-46.933333 0-84.992-37.888-84.992-85.333333z" p-id="28260"></path></svg>
        </button>
      </div>

      <!-- Navbar 右侧 -->
      <img
          class="w-11 h-11 rounded-lg object-cover"
          src="https://primefaces.org/cdn/primevue/images/organization/walter.jpg"
      />
    </div>
  </nav>

  <!-- 占位符，这样在Main.vue中不需要进行处理Navbar下面的空间 -->
  <div class="h-16"></div>
</template>
